<template>
	<view class="unio2o-search bg-w">
			<view class="unio2o-search-main flex space alcenter">
				<view class="search-left plr30">
					<view @click="searchArea" class="flex alcenter  ft16 text-main">
						<view class="search-area ftw500">合肥</view>
						<view class="scale6">
							<view class="search-jt iconfont icon_arrowdown1" :class="{'on':areaDiv}"></view>
						</view>	
					</view>
				</view>
				<view class="search-center plr30 flex alcenter ft16 text-notice">
					<view class="iconfont icon_search"></view>
					<view class="ml20">
						   <swiper class="search-swiper" :vertical="true"  :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
								<swiper-item>
									<navigator :url="'/pages/search/index?keyword='+encodeURI('搜索商家')">
									<view class="text-over">搜索商家</view>
									</navigator>
								</swiper-item>
								<swiper-item>
									<navigator :url="'/pages/search/index?keyword='+encodeURI('老乡鸡圣诞活动')">
									<view  class="text-over">老乡鸡圣诞活动</view>
									</navigator>
								</swiper-item>
								<swiper-item>
									<navigator :url="'/pages/search/index?keyword='+encodeURI('麦当劳儿童寒假')">
									<view  class="text-over">麦当劳儿童寒假</view>
									</navigator>
								</swiper-item>
							</swiper>
					</view>
				</view>
				<view class="search-right plr30">
					<navigator url="/pages/notice/index">
					<view class="notice-body">
						<text class="iconfont iconbtn_msg text-main ft24"></text>
						<view class="notice-badge bg-main"></view>
					</view>
					</navigator>
				</view>
			</view>	
			
			<view v-if="areaDiv" class="unio2o-search-area">
				<view class="pd30 bg-default ft16 text-info">
					<text class="iconfont icon_location1"></text>
					<text class="ml30">已开通以下城市</text>
				</view>
				<view class="plr30">
					<view class="pt30 pb30 flex space">
						<text class="ft16 text-main">北京</text>
					</view>
					<view class="line"></view>
				</view>
				<view class="plr30">
					<view class="pt30 pb30 flex space">
						<text class="ft16 text-main">北京</text>
					</view>
					<view class="line"></view>
				</view>
				<view class="plr30">
					<view class="pt30 pb30 flex space">
						<text class="ft16 text-main ftw600">北京</text>
						<text class="iconfont icon_selected text-theme"></text>
					</view>
					<view class="line"></view>
				</view>
				<view class="plr30">
					<view class="pt30 pb30 flex space">
						<text class="ft16 text-main">北京</text>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				areaDiv:false,
			};
		},
		methods:{
			searchArea(){
				this.areaDiv = !this.areaDiv;
			}
		}
	}
</script>

<style>
	/*层级要高于底部菜单*/
	.unio2o-search{
		height: 100rpx;
		position: relative;
		z-index: 168;
	}
	
	
	.unio2o-search-main{
		height: 100rpx;
	}
	.unio2o-search-area{
		position: absolute;
		z-index: 168;
		width: 100%;
		height: calc(100vh - 100rpx);
		overflow-y: scroll;
		background: #FFFFFF;
	}
	.search-center{
		height: 72rpx;
		width: 450rpx;
		border-radius: 36rpx;
		background: #F5F5F5;
	}
	.notice-body{
		width: 48rpx;
		height: 48rpx;
		position: relative;
	}
	.notice-badge{
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		width: 16rpx;
		height: 16rpx;
		border-radius: 8rpx;
	}
	.search-swiper{
		width: 320rpx;
		height: 40rpx;
	}
	.search-jt{
		display: inline-block;
		
		transition: all .3s;
	}
	.search-area{
		width: 72rpx;
		overflow: hidden;
	}
	.search-jt.on{
		transform:rotate(180deg);
	}
</style>
